@extends('layouts.app')

@section('title', '生成二维码')

@section('css-import')

<!-- <link rel="stylesheet" type="text/css" href="{{config('app.inlet_src')}}/assets/css/htmleaf-demo.css"> -->
<link rel="stylesheet" href="{{config('app.inlet_src')}}assets/css/baguetteBox.min.css">
<!-- <link rel="stylesheet" href="{{config('app.inlet_src')}}/assets/css/gallery-grid.css"> -->
<style type="text/css">
	.identitycardimg_sty{
		width:600px;
		display:block;
	}
	.modal-content{
		width:900px;
	}
	.button-center-sx{
		margin-top: 100px;
		margin-left: 100px;
	}
</style>
@endsection

@section('content-fluid')
<div class="tz-gallery">
	<h3 class="page-title">预生成二维码</h3>
	<div class="col-md-3 col-md-offset-4">
		<label class="control-label">数据库最大商铺ID</label>
		<input type="text" disabled="disabled" name="shopid_max" value="{{$maxid}}" class="form-control" placeholder="商铺ID依次递增">
		<br>
		<label class="control-label">（最近生成的商铺ID：<span class="shopidcreate">{{$shopidcreate ?? '0'}}</span>）生成ID为：</label>
		<input type="number" name="shopid_lately" value="" class="form-control" placeholder="商铺ID依次递增">
		<br>
	</div>
	<div class="row text-center">
	    <div class="col-sm-6 col-md-offset-4">
	        <img src="./qrcode.png" class="img-responsive identitycardimg" alt="Responsive image" style="display: none;">
	    </div>
	    <div class="col-sm-6 col-md-offset-2">
	        <input type="button"  class="btn btn-success button-center-sx create_button_qrcode" value="生成二维码">
	    </div>
	</div>
</div>
<div class="modal fade" tabindex="-1" id="exampleModal" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">大图</h4>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<img src="" class="identitycardimg identitycardimg_sty center-block hide">
@endsection

@section('js-import')
<script type="text/javascript" src="{{config('app.inlet_src')}}assets/scripts/baguetteBox.min.js"></script>
<script type="text/javascript" src="{{config('app.inlet_src')}}a/js/licence.js"></script>
@endsection

@section('js-write')
<script type="text/javascript">
	baguetteBox.run('.tz-gallery');
	$('.identitycardimg').click(function(){
		var this_ = $(this).clone();
		var modal = $('#exampleModal');
		modal.find('.modal-body').empty();
	   $(this_).attr('src',this_.context.currentSrc).attr('class','identitycardimg identitycardimg_sty center-block');
	   modal.find('.modal-body').append($(this_));
		$('#exampleModal').modal();
	});
	$('.create_button_qrcode').click(function(){
		$.ajaxSetup({
		    headers: {
		        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		    }
		});
		var shopid = $('input[name="shopid_lately"]').val();
		$.post('/actionCreatecode',{'shopid_lately':shopid},function(reponse){
			if(reponse.success){
				// console.log(reponse);
				$('.identitycardimg').attr('src',reponse.qrcode+"?r="+Math.round(Math.random()*10000)).show();
				$('.shopidcreate').html(reponse.shopidcreate);
			}else{

			}
		});
	});
	
</script>
@endsection